<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="x-rim-auto-match" content="none">
    <title>海苔君</title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/index_1.css" type="text/css"/>
</head>

<body class="graybg">
<div class="wrap">
    <div class="index-top-header">
        <header class="index-header dn">
            <!--<a href="javascript:;" class="menu-icon"></a>
            <h2 title="MR.HT" id="topNavBtn"><img src="${base}/images/index_09.png" width="8" class="sjx" /></h2>
            -->
            <a href="javascript:;" class="menu-icon" id="topNavBtn"></a>
            <a href="javascript:;" class="top-search-icon" id="showSearchBtn"></a>
            <h2 class="center-tab" id="indexTab">
                <a href="javascript:;" class="on animate" aim="tab_0">推荐</a>
                <!--<a href="javascript:;" class="animate" aim="tab_1">晒物</a>-->
                <a href="javascript:;" class="animate" aim="tab_2">关注</a>
            </h2>
        </header>
        <header class="index-header top-search" id="searchBox">
            <div class="index-top-search">
                <a href="javascript:;" class="cancle-btn" id="hideSearchBtn">取消</a>
                <div class="search-box">
                    <input type="text" placeholder="搜索发现新世界" class="input-txt" id="searchInput" />
                </div>
            </div>
        </header>
    </div>
    <div class="top-nav">
        <ul class="tc">
            <li><a href="#" class="on">全部</a></li>
            <li><a href="#">专题</a></li>
            <li><a href="#">兴趣</a></li>
            <li><a href="#">关注</a></li>
            <li><a href="#">收藏</a></li>
            <li>
                <a href="javascript:;" class="close-icon"><img src="images/close_icon.png" width="18" /> </a>
            </li>
        </ul>
    </div>
    <div class="h41"></div>
    <div class="index-top dn">
        <div class="index-banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="images/default_cover.png" width="100%" /></div>
                    <div class="swiper-slide"><img src="images/default_cover.png" width="100%" /></div>
                    <div class="swiper-slide"><img src="images/default_cover.png" width="100%" /></div>
                    <div class="swiper-slide"><img src="images/default_cover.png" width="100%" /></div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="index-top-live">
            <a href="#">
                <div class="tx-list">
                    <img src="images/default_more_tx.png" class="tx_0" />
                    <img src="images/default_more_tx.png" class="tx_1" />
                    <img src="images/default_more_tx.png" class="tx_2" />
                </div>
                <h2 class="desc">正在直播（<span id="topLiveNum">6</span>人）</h2>
            </a>
        </div>
        <div class="shadow"></div>
    </div>

<div class="index-list dn">
    <div class="pingce">
        <a href="#">
            <div class="pic">
                <div class="mask"># 评测</div>
                <div class="three">
                    <img src="images/default_cover.png" class="img_0" />
                    <img src="images/default_cover.png" class="img_1" />
                    <img src="images/default_cover.png" class="img_2" />
                </div>
            </div>
            <div class="list-user">
                <a href="javascript:;" class="atten"></a>
                <div class="user">
                    <a href="customer.html">
                        <img src="images/default_tx.png" />
                        <p class="g6">通路为王</p>
                    </a>
                </div>
            </div>
            <div class="star">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span class="empty-star"></span>
            </div>
            <a href="#">
                <p class="g6 tit">
                    这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字
                </p>
                <p class="time g9 mt10">
                    2016-02-12 12:12:12
                </p>
            </a>
        </a>
        <div class="bottom">
            <div class="opreat">
                <a href="javascript:;" class="icon xin"></a>
                <a href="javascript:;" class="icon com"></a>
            </div>
            <div class="tx-list">
                <img src="images/default_tx.png" class="tx_0" />
                <img src="images/default_tx.png" class="tx_1" />
                <img src="images/default_tx.png" class="tx_2" />
                <img src="images/default_tx.png" class="tx_3" />
                <img src="images/default_more_tx.png" class="tx_4" />
            </div>

        </div>
    </div>
    <div class="pingce ugc">
        <div class="pic"><a href="/hitgou-weisite/ugc?id=5111"><img src="http://7xs8jc.com2.z0.glb.qiniucdn.com/2/Res/productList/10b452a85b5550d67b39972705675b13.png?_htwh=720&amp;_htht=540&amp;imageView2/2/w/640" width="100%"></a><div class="lable" style="left:27%;top:75%;"><b></b><a href="/hitgou-weisite/label?id=3644">芒果蒟蒻果冻</a></div></div>
        <div class="list-user">
            <a href="javascript:;" class="atten"></a>
            <div class="user">
                <a href="customer.html">
                    <img src="images/default_tx.png" />
                    <p class="g6">通路为王</p>
                </a>
            </div>
        </div>
        <a href="#">
            <p class="g6 tit mt10">
                这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字
            </p>
            <p class="time g9 mt10">
                2016-02-12 12:12:12
            </p>
        </a>
        <div class="bottom">
            <div class="opreat">
                <a href="javascript:;" class="icon xin"></a>
                <a href="javascript:;" class="icon com"></a>
            </div>
            <div class="tx-list">
                <img src="images/default_tx.png" class="tx_0" />
                <img src="images/default_tx.png" class="tx_1" />
                <img src="images/default_tx.png" class="tx_2" />
                <img src="images/default_tx.png" class="tx_3" />
                <img src="images/default_more_tx.png" class="tx_4" />
            </div>

        </div>
    </div>
    <div class="pingce article">
        <div class="pic"><a href="/hitgou-weisite/ugc?id=5111"><img src="http://7xs8jc.com2.z0.glb.qiniucdn.com/2/Res/productList/10b452a85b5550d67b39972705675b13.png?_htwh=720&amp;_htht=540&amp;imageView2/2/w/640" width="100%"></a></div>
        <div class="list-user">

            <div class="user">
                <img src="images/default_tx.png" />
                <p class="g6">通路为王</p>
            </div>
        </div>
        <div class="mt10 tc">
            <a href="javascript:;" class="atten"></a>
        </div>
        <h3 class="mt10 tit">
            <a href="#">这里是文字的标题哦，标题文字有多少就显示多少吧</a>
        </h3>

        <div class="bottom">
            <div class="opreat">
                <a href="javascript:;" class="icon xin"></a>
                <a href="javascript:;" class="icon com"></a>
            </div>
            <p class="time g9">
                2016-02-12 12:12:12
            </p>
        </div>
    </div>
    <div class="pingce live">
        <div class="pic">
            <div class="mask"># 直播</div>
            <a href="/hitgou-weisite/ugc?id=5111">
                <div class="live-icon"></div>
                <img src="http://7xs8jc.com2.z0.glb.qiniucdn.com/2/Res/productList/10b452a85b5550d67b39972705675b13.png?_htwh=720&amp;_htht=540&amp;imageView2/2/w/640" width="100%" />
                <div class="live-pic-bottom">
                    <div class="fr mr10">已开始：<span>00:12:12</span><div class="live-animate-icon"><span></span><span></span><span></span><span></span></div> </div>
                </div>
            </a>
        </div>
        <div class="list-user">
            <a href="javascript:;" class="atten"></a>
            <div class="user">
                <a href="customer.html">
                    <img src="images/default_tx.png" />
                    <p class="g6">通路为王</p>
                </a>
            </div>
        </div>
        <a href="#">
            <p class="g6 tit mt10">
                这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字这里是评测的文字
            </p>
            <p class="time g9 mt10">
                2016-02-12 12:12:12
            </p>
        </a>
        <div class="bottom">
            <div class="fr cr f14">
                1235423人正在观看
            </div>
            <div class="tx-list">
                <img src="images/default_tx.png" class="tx_0" />
                <img src="images/default_tx.png" class="tx_1" />
                <img src="images/default_tx.png" class="tx_2" />
                <img src="images/default_tx.png" class="tx_3" />
                <img src="images/default_more_tx.png" class="tx_4" />
            </div>

        </div>
    </div>
</div>

</div>
<div class="atten-page dn">
    <div class="my-atten">
        <div class="bar">
            <h3>我的关注(<span id="myAttendNum">20</span>)</h3>
        </div>
        <div class="cont">
            <ul class="my-attend-list fix">
                <li><a href="#"><img src="images/default_tx.png" /> <p class="ell"><span class="red-dot"></span>通路为王</p></a></li>
                <li><a href="#"><img src="images/default_tx.png" /> <p class="ell"><span class="red-dot"></span>通路sdafasfads为王</p></a></li>
                <li><a href="#"><img src="images/default_tx.png" /> <p class="ell"><span class="red-dot"></span>通路为王</p></a></li>
                <li><a href="#"><img src="images/default_tx.png" /> <p class="ell"><span class="red-dot"></span>通路为王</p></a></li>
                <li><a href="#"><img src="images/default_more_tx.png" /></a></li>
            </ul>
        </div>
    </div>
    <div class="mt10">
        <div class="new-message-tip">
            又发现了<span id="newMessageNum">10</span>条新鲜内容
        </div>
    </div>
</div>
<div id="noAttendPage">
    <div class="no-attend">
        <img src="images/empty_attend_icon.png" width="33" height="44" />
        <p>你还没有关注任何人</p>
    </div>
    <div class="search-list-box mt10">
        <div class="bar">
            <h3 class="tc">——— 猜你喜欢 ———</h3>
        </div>
        <div class="cont">
            <ul class="fix hot-word">
                <li><a href="#">NGN懒人救星</a></li>
                <li><a href="#">N救星</a></li>
                <li><a href="#">N救哎呀这里文字要长一些哦星</a></li>
                <li><a href="#">N救</a></li>
                <li><a href="#">N救哎呀这里文字</a></li>
                <li><a href="#">N救哎呀这里文字要长一些哦星</a></li>
            </ul>
        </div>
    </div>
    <div class="search-list-box mt10 recommend-box">
        <div class="bar pr">
            <a href="javascript:;" class="icon recommend-change-icon" id="changeRecommend"><span class="refresh-icon"></span>换一批</a>
            <h3 class="tc">——— 推荐达人 ———</h3>
        </div>
        <div class="recommend-user">
            <div class="recommend-list">
                <div class="top">
                    <a href="javascript:;" class="atten"></a>
                    <div class="user">
                        <img src="images/default_tx.png" width="42" height="42" />
                        <h4>用户昵称</h4>
                        <p>内容:<span>14</span> / 粉丝:<span>320</span></p>
                    </div>
                </div>
                <div class="main">
                    <dl class="fix">
                        <dd>
                            <a href="#">
                                <img src="images/default_cover.png" />
                                <p class="ell">这里是标题文字哦，可能会省略掉</p>
                            </a>
                        </dd>
                        <dd>
                            <a href="#">
                                <img src="images/default_cover.png" />
                                <p class="ell">这里是标题文字哦，可能会省略掉</p>
                            </a>
                        </dd>
                        <dd>
                            <a href="#">
                                <img src="images/default_cover.png" />
                                <p class="ell">这里是标题文字哦，可能会省略掉</p>
                            </a>
                        </dd>
                    </dl>
                </div>
            </div>
            <div class="recommend-list">
                <div class="top">
                    <a href="javascript:;" class="atten attend"></a>
                    <div class="user">
                        <img src="images/default_tx.png" width="42" height="42" />
                        <h4>用户昵称</h4>
                        <p>内容:<span>14</span> / 粉丝:<span>320</span></p>
                    </div>
                </div>
                <div class="main">
                    <dl class="fix">
                        <dd>
                            <a href="#">
                                <img src="images/default_cover.png" />
                                <p class="ell">这里是标题文字哦，可能会省略掉</p>
                            </a>
                        </dd>
                        <dd>
                            <a href="#">
                                <img src="images/default_cover.png" />
                                <p class="ell">这里是标题文字哦，可能会省略掉</p>
                            </a>
                        </dd>
                        <dd>
                            <a href="#">
                                <img src="images/default_cover.png" />
                                <p class="ell">这里是标题文字哦，可能会省略掉</p>
                            </a>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="h70"></div>
<div class="index-fix">
    <ul>
        <li><a href="#" class="find">长草</a></li>
        <li class="add">
            <div class="bg">
                <img src="images/index_23.png" width="5" class="left"/>
                <img src="images/index_26.png" width="5" class="right"/>
                <a href="#">
                    <img src="images/index_30.png" width="32" />
                </a>
            </div>
        </li>
        <li><a href="center.html" class="me">败家</a></li>
    </ul>
</div>
<div class="search-page">
  <div class="h41"></div>
  <div class="search-list-box">
      <div class="bar">
          <a href="javascript:;" class="icon"><span class="clear-icon"></span>清空</a>
          <h3>搜索历史</h3>
      </div>
      <div class="cont">
          <ul class="fix">
              <li><a href="#">NGN懒人救星</a></li>
              <li><a href="#">N救星</a></li>
              <li><a href="#">N救哎呀这里文字要长一些哦星</a></li>
              <li><a href="#">N救</a></li>
              <li><a href="#">N救哎呀这里文字</a></li>
              <li><a href="#">N救哎呀这里文字要长一些哦星</a></li>
          </ul>
      </div>
  </div>
    <div class="search-list-box mt10">
        <div class="bar">
            <a href="javascript:;" class="icon"><span class="refresh-icon" id="refreshBtn"></span>刷新</a>
            <h3>热门搜索</h3>
        </div>
        <div class="cont">
            <ul class="fix hot-word">
                <li><a href="#">NGN懒人救星</a></li>
                <li><a href="#">N救星</a></li>
                <li><a href="#">N救哎呀这里文字要长一些哦星</a></li>
                <li><a href="#">N救</a></li>
                <li><a href="#">N救哎呀这里文字</a></li>
                <li><a href="#">N救哎呀这里文字要长一些哦星</a></li>
            </ul>
        </div>
    </div>
</div>
<script src="js/lib/swiper.min.js"></script>
<script src="js/sea.js"></script>
<script>
    seajs.config({
        alias:{
            'jquery':'lib/jquery.js',
            'zepto':'lib/zepto.js',
            'swiper':'lib/swiper.min.js'
        },
        paths:{
            'basePath':'js/'
        },
        debug:true
    })
    seajs.use("src/ugc");
</script>
</body>
</html>
